<template>
  <div class="showinfo">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="30"> </el-table-column>
      <el-table-column prop="name" label="班级名称" width="180">
      </el-table-column>
      <el-table-column prop="school_name" label="学院"> </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="2"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      total:0,
      queryInfo:{
        pagenum:1
      }
    }
  },
  // {data:data}=value
  created(){
    this.getData()
  },
  methods:{
    getData(){
      axios.get('/api/classes?page='+this.queryInfo.pagenum).then(({data})=>{
        // const data=value.data
        console.log(data);
        this.tableData=data.data
        this.total=data.count
      })
    },
    currentChange(page){
      this.queryInfo.pagenum=page
      this.getData()
    }
  }
}
</script>

<style lang='less' scoped>
.showinfo {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #fff;
  .el-pagination {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>